<template>
  <view class="orderList">
    <view class="search">
      <view class="inp">
        <u-search
          borderColor="#f0f0f0"
          bgColor="#fff"
          shape="square"
          v-model="params.searchValue"
          :clearabled="true"
          :showAction="false"
          @clear="searchClear"
          @focus="searchFocus"
          @blur="searchBlur"
          placeholder="请输入下单人手机号后四位"
        ></u-search>
      </view>

      <view v-if="searchForm.focus" class="btn">搜索</view>
      <view
        v-else
        class="btn-screen"
        :style="{ color: isHasFilter ? '#ffb72f' : '' }"
        @click="btnScreen"
      >
        <view class="iconfont icon-shaixuan"></view>
        筛选
      </view>
    </view>

    <u-popup
      :show="searchForm.screenBox"
      @close="searchForm.screenBox = false"
      round="8rpx"
      :closeable="true"
    >
      <view class="screen-box">
        <block>
          <view>顾客下单日期</view>
          <view class="fixed-date">
            <view
              v-for="(item, index) in dateForm.dateList"
              :key="index"
              :style="{
                backgroundColor:
                  dateForm.dateActive === index ? '#ffb72f' : '#ffffff',
                color: dateForm.dateActive === index ? '#ffffff' : '',
              }"
              @click="handleDate(index)"
              class="date"
            >
              {{ item.label }}
            </view>
          </view>
        </block>

        <block>
          自定义日期
          <view class="cust-date">
            <view class="example-body"
              ><uni-datetime-picker
                @change="handlePickerDate"
                v-model="range"
                type="daterange"
                rangeSeparator="-"
                :clear-icon="false"
            /></view>
          </view>
        </block>

        <block v-if="pubUserInfo.mainShopStatus">
          门店筛选
          <view @click="storeScreenForm.show = true" class="store-screen">
            <view class="store-box">
              <view>{{ storeScreenForm.shopName || "全部" }}</view>
              <view class="iconfont icon-xuanzeqizhankai"></view>
            </view>
            <u-picker
              :show="storeScreenForm.show"
              :columns="storeScreenForm.columns"
              keyName="name"
              v-model="params.storeValue"
              @confirm="storeScreenConfirm"
              @cancel="storeScreenForm.show = false"
            ></u-picker>
          </view>
        </block>

        <view class="submit">
          <u-button
            :customStyle="{ width: '303rpx' }"
            type="primary"
            :plain="true"
            @click="handleReset"
            text="重置"
          ></u-button>
          <u-button
            @click="handleSubmit"
            :customStyle="{ width: '303rpx' }"
            type="primary"
            text="确认"
          ></u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import dayjs from "dayjs";
import { getShops } from "@/service/api/sp-store/index.js";
import { mapState } from "@dcloudio/vue-cli-plugin-uni/packages/vuex3/dist/vuex.common";
export default {
  data() {
    return {
      // 搜索
      searchForm: {
        focus: false,
        screenBox: false,
      },
      // 日期
      dateForm: {
        dateActive: 0,
        dateList: [
          {
            label: "全部日期",
            value: "",
          },
          {
            label: "今日",
            value: 0,
          },
          {
            label: "昨日",
            value: -1,
          },
          {
            label: "近7日",
            value: -7,
          },
          {
            label: "近30日",
            value: -30,
          },
        ],
      },
      range: [],
      // 门店筛选
      storeScreenForm: {
        show: false,
        shopName: "",
        columns: [[]],
      },
      //变化总数据
      params: {
        searchValue: "",
        startDate: "",
        endDate: "",
        storeValue: "",
      },
      //提交的时候总数据
      submitForm: {
        searchValue: "",
        startDate: "",
        endDate: "",
        storeValue: "",
      },
    };
  },
  computed: {
    ...mapState("sp-common/auth", ["pubUserInfo"]),
    isHasFilter({ submitForm }) {
      return !!submitForm.endDate || !!submitForm.storeValue;
    },
  },
  watch: {
    params: {
      deep: true,
      handler(newVal) {
        console.log("参数更新", newVal);
      },
    },
  },
  mounted() {
    this.getShopsFun();
  },
  methods: {
    // 搜索
    searchFocus() {
      this.searchForm.focus = true;
      this.searchForm.screenBox = false;
    },
    searchBlur() {
      if (!this.params.searchValue) {
        this.searchForm.focus = false;
      }
      this.$emit("blur", this.params.searchValue);
    },
    searchClear() {
      this.params.searchValue = "";
      this.searchForm.focus = false;
      this.$emit("blur", "");
    },
    close() {
      this.searchForm.screenBox = false;
    },

    btnScreen() {
      this.searchForm.screenBox = true;
    },
    // 日期
    handleDate(index) {
      this.dateForm.dateActive = index;
      const tempData = this.dateForm.dateList[index];
      if (tempData.value === "") {
        this.params.startDate = "";
        this.params.endDate = "";
      } else if (tempData.value === 0) {
        this.params.startDate = dayjs()
          .add(tempData.value, "day")
          .format("YYYY-MM-DD 00:00:00");
        this.params.endDate = dayjs().format("YYYY-MM-DD 23:59:59");
      } else if (tempData.value < 0) {
        this.params.startDate = dayjs()
          .add(tempData.value, "day")
          .format("YYYY-MM-DD 00:00:00");
        this.params.endDate = dayjs().format("YYYY-MM-DD 23:59:59");
      } else {
        this.params.startDate = dayjs().format("YYYY-MM-DD 00:00:00");
        this.params.endDate = dayjs()
          .add(tempData.value, "day")
          .format("YYYY-MM-DD 23:59:59");
      }
      this.range = [];
    },
    handlePickerDate(newVal) {
      this.params.startDate = newVal[0];
      this.params.endDate = newVal[1];
      this.dateForm.dateActive = 0;
    },
    // 门店筛选
    storeScreenConfirm(val) {
      const { value } = val;
      this.params.storeValue = value[0].id;
      this.storeScreenForm.shopName = value[0].name;
      this.$nextTick(() => {
        this.storeScreenForm.show = false;
      });
    },
    getShopsFun() {
      getShops().then((res) => {
        this.storeScreenForm.columns[0].push({
          name: "全部",
          shopId: "",
          id: "",
        });
        res.forEach((item) => {
          this.storeScreenForm.columns[0].push(item);
        });
      });
    },
    handleSubmit() {
      this.submitForm = Object.assign({}, this.params);
      this.$nextTick(() => {
        this.$emit("submit", this.submitForm);
        this.searchForm.screenBox = false;
      });
    },
    handleReset() {
      this.params = {
        searchValue: "",
        startDate: "",
        endDate: "",
        storeValue: "",
      };
      this.submitForm = Object.assign({}, this.params);
      this.storeScreenForm.shopName = "";
      this.dateForm.dateActive = 0;
      this.$nextTick(() => {
        this.$emit("reset", this.submitForm);
      });
    },
  },
};
</script>
<style>
page {
  background-color: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  padding: 24rpx;
  box-sizing: border-box;
  .inp {
    flex: 5;
  }
  .btn,
  .btn-screen {
    flex: 1;
    //color: #ffb72f;
    font-size: 22rpx;
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
    .iconfont {
      font-size: 34rpx;
    }
  }
}
.screen-box {
  width: 100%;
  font-size: 29rpx;
  font-weight: 500;
  color: #131313;
  padding: 50rpx 41rpx;
  box-sizing: border-box;
  .fixed-date {
    display: flex;
    justify-content: space-between;
    margin: 30rpx 0 40rpx 0;
    .date {
      background-color: white;
      border-radius: 8rpx;
      padding: 10rpx 19rpx;
      font-size: 26rpx;
    }
  }
  .cust-date {
    .example-body {
      margin: 30rpx 0 40rpx 0;
    }
  }
  .store-screen {
    .store-box {
      width: 656rpx;
      height: 60rpx;
      border: 1px solid #dbdbdb;
      border-radius: 8rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 23rpx;
      margin-top: 29rpx;
      color: #b0b0b0;
    }
  }
  .submit {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 40rpx;
  }
}
</style>
